//Global font size
@fontSize: 28px;
@theme: #001B40;
@nuxt-main-padding: 24px;
@table-th-color: #eceef3;
@fontSize-m: 14px;
@breadcrumb-color: #405cc0;
@button-color: #1890ff;
@borderColor: #c8c9cc;
@bgColor: #fff;

@danger: #f56c6c;
@info: #909399;
@success: #67c23a;
@warning: #e6a23c;

@base-vw: 1920;
// @vw: (@value / @baseWidth) * 100;
// 定义一个混合，接受动态传入的宽度比例参数
.width(@width) {
  width: (@width / @base-vw) * 100vw;
}

.maxWidth(@width) {
  max-width: (@width / @base-vw) * 100vw;
}

.minWidth(@width) {
  min-width: (@width / @base-vw) * 100vw;
}

.height(@height) {
  height: (@height / @base-vw) * 100vw;
}

.maxHeight(@height) {
  max-height: (@height / @base-vw) * 100vw;
}

.flex(@width) {
  flex: 0 0 (@width / @base-vw) * 100vw;
}

.lineH(@lineH) {
  line-height: (@lineH / @base-vw) * 100vw;
}

.top(@top) {
  top: (@top / @base-vw) * 100vw;
}

.left(@left) {
  left: (@left / @base-vw) * 100vw;
}

.pd(@t, @r, @b, @l) {
  padding-left: ( @l / @base-vw) * 100vw;
  padding-right: (@r / @base-vw) * 100vw;
  padding-top: (@t / @base-vw) * 100vw;
  padding-bottom: (@b / @base-vw) * 100vw;
}

.mg(@t, @r, @b, @l) {
  margin-left: ( @l / @base-vw) * 100vw;
  margin-right: (@r / @base-vw) * 100vw;
  margin-top: (@t / @base-vw) * 100vw;
  margin-bottom: (@b / @base-vw) * 100vw;
}

.mgAuto(@t, @b) {
  margin-left: auto;
  margin-right: auto;
  margin-top: (@t / @base-vw) * 100vw;
  margin-bottom: (@b / @base-vw) * 100vw;
}

.ft(@ft) {
  font-size: (@ft / @base-vw) * 100vw;
}

.border(@border) {
  border-radius: (@border / @base-vw) * 100rem;
}
